<template>
  <div style="width: 100%;height: 100%" v-loading="loading">
    <div style="height: 100px;width: 100%;margin: 0 auto">
      <span>你的搜索词：</span>
      <el-input
        v-model="keyword"
        placeholder="请输入搜索内容"
        style="width: 500px; margin: 30px 0 auto"
        disabled
      >
      </el-input>
    </div>
    <el-row>
      <el-col :span="4" v-for="(goods, i) in goodsList" :key="i" :offset="i > -1 ? 0 : 0">
        <el-card class="card" :body-style="{ padding: '10px' }" shadow="never" style="z-index: 9999">
          <div style="z-index: 1;position: absolute"><el-tag size="mini" v-if="goods.isAdvertising === '1'">广告</el-tag></div>
          <el-image :src="goods.goodsPic"
                    class="image">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <div style="padding: 5px;text-align: left">
            <el-tooltip class="item" effect="light" :content="goods.goodsName" placement="top-start">
              <el-link :underline="false" class="span-box" @click.prevent="toGoodsInfo(goods)">
                <span class="font-spa" v-text="goods.goodsName"></span>
              </el-link>
            </el-tooltip>
            <div class="bottom clearfix">
              <div class="business-name">
                <span style="font-size: 13px" v-text="goods.businessName"></span>
              </div>
              <div style="text-align: right">
                <span class="price"><em>￥</em>{{ goods.goodsPrice }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div>
      <el-pagination
        v-loading="loading"
        class="page"
        background
        layout="prev, pager, next"
        @current-change="toPage"
        :page-size="30"
        :total="pageParams.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {CategorySearch, keywordSearch} from "@/api";

export default {
  name: "search-result",
  data() {
    return {
      pageParams: {
        page: 1,
        limit: 30,
        total: 0
      },
      keyword: this.$route.query.keyword,
      version: this.$route.query.version, // 搜索的策略
      goodsList: [],
      loading: true,
      type: '1'
    }
  },
  methods: {
    // 关键词搜索
    searchKeyword() {
      const request = this.buildSearchObj();
      keywordSearch(request).then(res => {
        const result = res.data.result.resultList;
        if (result === null || result === undefined){
          this.goodsList = res.data.result;
        }else {
          this.goodsList = result;
          this.pageParams.total = res.data.result.totalCount;
          this.pageParams.page = res.data.result.pageNum;
        }
      })
    },
    // 商品类别搜索
    searchCategory(){
      const request = this.buildSearchObj();
      CategorySearch(request).then(res => {
        const result = res.data.result.resultList;
        if (result === null || result === undefined){
          this.goodsList = res.data.result;
        }else {
          this.goodsList = result;
          this.pageParams.total = res.data.result.totalCount;
          this.pageParams.page = res.data.result.pageNum;
        }
      })
    },
    // 跳转到商品详细信息页
    toGoodsInfo(obj){
      obj={
        id: '21321341234',
        name: 'dasda'
      }
      window.open(
        "http://localhost:8080/goods.html?obj=" + encodeURIComponent(JSON.stringify(obj)),
        "_blank"
      );
    },
    // 页数变化
    toPage(val) {
      this.pageParams.page = val;
      this.type = '2';
      this.searchType()
    },
    // 创建关键词搜索请求体
    buildSearchObj(){
      return {
        typeName: this.keyword,
        uid: localStorage.getItem("uid"),
        pageNum: this.pageParams.page,
        pageSize: this.pageParams.limit,
        total: this.pageParams.total,
        type: this.type
      };
    },
    // 判断执行的搜索策略
    searchType(){
      if (this.version === '1'){
        this.searchKeyword();
      }else{
        this.searchCategory();
      }
    }
  },
  created() {
    this.searchType()
    setTimeout(() => {
      this.loading = false
    }, 1000);
  }
}
</script>

<style scoped>
.bottom {
  margin-top: 15px;
  line-height: 10px;

}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 250px;
  display: block;
}
.price {
  color: #ff5000;
  line-height: 20px;
  text-align: right;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.card:hover {
  border: 1px solid #ff5000;
}

.font-spa {
  font-size: 15px;
  width: 100%;
}
.page {
  margin: 30px auto 0;
  width: 400px;
}
.span-box {
  height: 40px;
  overflow: hidden;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.business-name{
  overflow: hidden;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  float: left;
}
</style>
